/*
 * @Author: silas 
 * @Date: 2021-04-01 16:51:27 
 * @Last Modified by: silas
 * @Last Modified time: 2021-08-04 16:24:48
 */
<template>
  <div class="tobBtoC">
    <div>
      <el-form :inline="true" :model="form" label-width="60px" class="formList">
        <el-form-item label="账期" style="width: 15%">
          <el-date-picker
            style="width: 140px"
            v-model="form.time"
            type="year"
            placeholder="选择账期"
            value-format="yyyy"
          ></el-date-picker>
        </el-form-item>
        <el-form-item style="width: 40%">
          <el-button
            style="margin-left: 20px"
            size="mini"
            type="primary"
            @click="handle_search()"
            >查询</el-button
          >
          <el-button size="mini" type="orange" @click="handle_export()">
            导出
          </el-button>
          <!-- <el-button size="mini" @click="dialogVisible = true; importForm.month = '';" >刷新数据</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="table-content clearfix">
      <div class="content">
           <!-- show-summary
            sum-text="备注"
            :summary-method="getTotal" -->
        <div class="tableBox">
          <el-table
            v-loading="tableLoading"
            :data="tableData"
            style="width: 100%"
            class="tableTh28"
            border
            stripe
            ref="table"
            id="table1"
          >
            <el-table-column width="120" prop="areaname" label="区域" />
            <el-table-column
              v-for="(item, i) in title"
              :key="i"
              :label="item.label"
            >
              <el-table-column
                min-width="90"
                v-for="(it, index) in item.child"
                :key="'it' + index"
                :label="it.label"
                :prop="it.value"
              ></el-table-column>
            </el-table-column>
             <div slot="append" ref="info">
                 <div class="remark-wrapper" ref="mark">
                    <div class="g-remark">备注</div>
                    <div class="it" v-for="(it, i) in remarks" :title="remarkInfo['remark_' + (i + 1)]" :key="'remark' + i">{{remarkInfo['remark_' + (i + 1)] }}</div>
                 </div>
                 
             </div>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog
      title="刷新数据"
      append-to-body
      :visible.sync="dialogVisible"
      width="300px"
    >
      <el-form :model="importForm" ref="importForm" :rules="rules">
        <el-form-item label="日期" prop="month" label-width="80px">
          <el-date-picker
            style="width: 140px"
            v-model="importForm.month"
            type="month"
            size="mini"
            placeholder="选择年月"
            value-format="yyyyMM"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <div class="dialog-footer">
          <el-button size="mini" type="primary" @click="handle_refresh()"
            >确定</el-button
          >
          <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import FileSaver from "file-saver";
import XLSX from "xlsx";
const exportUrl = prefixAPI.pack;
export default {
  name: "ict",
  data() {
    return {
      form: {
        time: this.moment().format("yyyy"),
      },
      tableData: [],
      tableLoading: false,
      dialogVisible: false,
      importForm: {
        month: "",
      },
      rules: {
        month: [{ required: true, message: "请选择日期", trigger: "blur" }],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7;
        },
      },
      title: Array.from(
        new Array(13),
        (item, value) =>
          (item = {
            label: value + 1 < 13 ? (value + 1) + "月" : "当前累计",
            child: [
              {
                label: "项目个数",
                value: "num_" + (value + 1),
              },
              {
                label: "投资金额",
                value: "amount_" + (value + 1),
              },
            ],
          })
      ),
      isExporting: false,
      remarks: Array.from(new Array(12), (item, value) =>
                    item = {
                          label: (value + 1 )+ "月",
                          value: 'remark_' + (value + 1 )
                      }
            ),
      remarkInfo: {},
    };
  },
  mounted() {},
  methods: {
    init() {
      let that = this;

      that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      that.form.areaId = that.accountInfo.areaId;
      // that.form.time = that.moment().format("YYYYMM");
      that.getData();
    },
    getMonth() {
      var token = getCookie("token");
      $budgetAPI.getEvaluateMonth(
        {
          token,
        },
        (res) => {
          this.form.time = res.content;
          this.getData();
        }
      );
    },
    getData() {
      var that = this;

      that.tableLoading = true;
      $budgetAPI.getSummaryList(
        {
          acctYear: that.form.time,
        },
        (res) => {
          console.log(res);
          if (res && res.code == 0) {
            that.tableData = res.content.data;
            that.remarkInfo = res.content.remark;
            document.querySelector('.el-table__append-wrapper').style.width = '2460px';
            // setTimeout(()=>{
            //     if (that.$refs.mark) {
            //         var width = getComputedStyle(that.$refs.table.$refs.headerWrapper.querySelector('table')).width;
            //     //    el-table__append-wrapper
            //         that.$refs.mark.style = 'width:' + width
            //         that.$refs.info.style = 'width:' + width
            //         document.querySelector('.el-table__append-wrapper').style.width = width
            //     }
            // }, 1000)
            // that.$nextTick(()=>{
            //     if (that.$refs.mark) {
            //         var width = getComputedStyle(that.$refs.table.$refs.headerWrapper.querySelector('table')).width;
            //     //    el-table__append-wrapper
            //         that.$refs.mark.style = 'width:' + width
            //         that.$refs.info.style = 'width:' + width
            //         document.querySelector('.el-table__append-wrapper').style.width = width
            //     }
            // })
          }
          that.tableLoading = false;
        }
      );
    },
    handle_search() {
      this.getData();
    },
    handle_export() {
      var month = this.form.time,
          token = getCookie("token");

      window.open(`${exportUrl}/ictProject/export?acctYear=${month}&token=${token}`, "_self");

    //   this.isExporting = true;
    //   this.loading = this.$loading({
    //     lock: true,
    //     text: "正在导出",
    //     spinner: "el-icon-loading",
    //     background: "rgba(0, 0, 0, 0.7)",
    //   });
    //   setTimeout(() => {
    //     var xlsxParam = {
    //       raw: true,
    //     }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
    //     let workbook = XLSX.utils.book_new();
    //     let ws1 = XLSX.utils.table_to_sheet(
    //       document.querySelector("#table1"),
    //       xlsxParam
    //     );
    //     XLSX.utils.book_append_sheet(workbook, ws1, "记录汇总");
    //     let wbout = XLSX.write(workbook, {
    //       bookType: "xlsx",
    //       bookSST: true,
    //       type: "array",
    //     });
    //     try {
    //       FileSaver.saveAs(
    //         new Blob([wbout], {
    //           type: 'application/octet-stream;charset=utf-8"',
    //         }),
    //         "记录汇总.xlsx"
    //       );
    //       this.isExporting = false;
    //       this.loading.close();
    //     } catch (e) {
    //       if (typeof console !== "undefined") console.log(e, wbOut);
    //     }
    //     return wbout;
    //   }, 200);
    },
    handle_refresh() {
      var that = this;

      that.$refs["importForm"].validate((valid) => {
        if (valid) {
          $budgetAPI.lightEvlRefresh(
            {
              acctMonth: that.importForm.month,
            },
            (res) => {
              if (res.code == 0) {
                that.$message({
                  message: "刷新成功",
                  type: "success",
                });
                that.getData();
              } else {
                that.$message.error(res.message);
              }
              that.dialogVisible = false;
            },
            (err) => {
              that.dialogVisible = false;
            }
          );
        } else {
          return false;
        }
      });
    },
    getTotal(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "备注";
          return;
        }
        debugger
        const values = data.map((item) => Number(item[column.property]));
        if (column.property === "num") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
          sums[index] = "--";
        }
      });

      return sums;
    },
  },
};
</script>

<style lang="scss" scoped>
.remark {
  padding-top: 5px;
  text-align: left;
  .attention {
    font-weight: bold;
  }
}
.table-content {
  .table-header {
    display: flex;
    justify-content: space-between;
    .table-title {
      font-size: 14px;
      font-weight: bold;
      height: 30px;
      line-height: 30px;
      span {
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: #418ee9;
        border-radius: 1000%;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 3px;
      }
    }
  }
  .content {
    margin-top: 15px;
  }
}
.remark-wrapper {
    // display: flex;
    width: 100%;
    position: relative;
    .g-remark {
        width: 120px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border-right: 1px solid #bfbfbf;
        border-bottom: 1px solid #bfbfbf;
        display: inline-block;
        // position: absolute;
        // top: 0;
        // left: 0;
        float: left;
    }
    .it {
      display: inline-block;
        width: 180px;
        height: 35px;
        line-height: 35px;
        float: left;
        text-align: center;
        border-right: 1px solid #bfbfbf;
        border-bottom: 1px solid #bfbfbf;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // top: 0;
    }
}

</style>
